<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <script th:src="@{/echarts/jquery-1.11.1.min.js}"></script>
  <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
  <script th:src="@{/layui/layui.js}" charset="utf-8"></script>
  <style>
    body{margin: 10px;}
    .demo-carousel{height: 200px; line-height: 200px; text-align: center;}
  </style>
</head>
<body>


<!--    模态窗-->
<div id="addOrUpdateDiv" style="display: none;padding: 10px;padding-right: 5%">
  <form action="" method="post" id="searchFrm2" lay-filter="searchFrm2" class="layui-form">

    <div class="layui-form-item">
      <label class="layui-form-label">病人编号</label>
      <div class="layui-input-inline">
        <input type="text" name="id" required  lay-verify="required" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">病人姓名</label>
      <div class="layui-input-inline">
        <input type="text" name="name" required  lay-verify="required"  autocomplete="off" class="layui-input">
      </div>
    </div>
    <div>
      <label class="layui-form-label">选择医生</label>
      <div class="layui-input-block">
        <select name="did" id = "did" lay-filter="aihao">
          <option value=""></option>
        </select>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">身份证号</label>
      <div class="layui-input-inline">
        <input type="text" name="idCard" required  lay-verify="required"  autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">社保号</label>
      <div class="layui-input-inline">
        <input type="text" name="siNumber" required  lay-verify="required"  autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">挂号费</label>
      <div class="layui-input-inline">
        <input type="text" name="registerMoney" required  lay-verify="required"  autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">电话</label>
      <div class="layui-input-inline">
        <input type="text" name="phone" required  lay-verify="required"  autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">是否自费</label>
      <div class="layui-input-inline">
        <input type="radio" name="isPay" value="0" title="否">
        <input type="radio" name="isPay" value="1" title="是" checked>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">性别</label>
      <div class="layui-input-inline">
        <input type="radio" name="sex" value="0" title="否">
        <input type="radio" name="sex" value="1" title="是" checked>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">年龄</label>
      <div class="layui-input-inline">
        <input type="text" name="age" required  lay-verify="required"  autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">初复诊</label>
      <div class="layui-input-inline">
        <input type="radio" name="consultation" value="0" title="初诊">
        <input type="radio" name="consultation" value="1" title="复诊" checked>
      </div>
    </div>
    <div>
      <label class="layui-form-label">科室</label>
      <div class="layui-input-block">
        <select name="department" id = "department" lay-filter="aihao">
          <option value="">选择科室</option>
          <option value="1">急诊</option>
          <option value="2">儿科</option>
          <option value="3">妇科</option>
          <option value="4">皮肤科</option>
          <option value="5">内分泌科</option>
          <option value="6">牙科</option>
        </select>
      </div>
    </div>
    <div>
      <label class="layui-form-label">患者状态</label>
      <div class="layui-input-block">
        <select name="status" id = "status" lay-filter="aihao">
          <option value="">选择患者状态</option>
          <option value="1">挂号</option>
          <option value="2">已住院</option>
          <option value="3">已出院</option>
          <option value="4">已结算</option>
        </select>
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">挂号日期</label>
      <div class="layui-input-inline">
        <input type="text" name="registerDate" id="registerDate" class="layui-input" lay-verify="required" placeholder="yyyy-MM-dd">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">备注</label>
      <div class="layui-input-inline">
        <input type="text" name="remark" required  lay-verify="required"  autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="doAdd">新增或者更改病人挂号信息</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>

  </form>
</div>



<!--layui公共模块-->
<div th:include="commonmenu :: menu"></div>

<div class="layui-body">
  <!-- 内容主体区域 -->
  <!--搜索条件-->
  <div style="padding-top: 5%">
    <form action="" method="post" id="searchFrm" lay-filter="searchFrm" class="layui-form">
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">搜索条件</label>
          <div class="layui-input-inline">
            <input type="text" name="id" class="layui-input input-radius" placeholder="请输入病历号">
          </div>
          <div class="layui-input-inline">
            <input type="text" name="name" class="layui-input input-radius" placeholder="请输入病人姓名">
          </div>
          <div class="layui-input-inline">
            <select name="department" lay-filter="aihao">
              <option value="">请选择科室</option>
              <option value="1">急诊</option>
              <option value="2">儿科</option>
              <option value="3">妇科</option>
              <option value="4">皮肤科</option>
              <option value="5">内分泌科</option>
              <option value="6">牙科</option>
            </select>
          </div>
        </div>

        <div class="layui-inline">
          <button type="button" class="layui-btn layui-btn-sm layui-btn-radius" lay-submit="" lay-filter="doSearch"><i
                  class="layui-icon layui-icon-search layui-icon-normal"></i>查询
          </button>
          <button type="reset" class="layui-btn layui-btn-sm layui-btn-radius layui-btn-warm"><i
                  class="layui-icon layui-icon-refresh"></i><span>重置</span>
          </button>
        </div>
      </div>
    </form>
  </div>


  <!-- table -->
  <div>
    <table class="layui-hide" id="demo" lay-filter="test"></table>
  </div>
  <script type="text/html" id="barDemo">
    <button type="button" lay-event="update"  class="layui-btn layui-btn-sm layui-btn-radius"><i
            class="layui-icon layui-icon-edit" onclick="openAddLayer()"></i>编辑
    </button>
    <button type="button" lay-event="delete"  class="layui-btn layui-btn-sm layui-btn-danger layui-btn-radius"><i
            class="layui-icon layui-icon-delete"></i>删除
    </button>

  </script>
</div>






<script>
  layui.config({
    version: '1632428048355' //为了更新 js 缓存，可忽略
  });

  var tableIns;
  var mainIndex;

  //加载模块
  layui.use(['jquery'],function(){
    var layer = layui.layer //弹层
            ,$ = layui.jquery
            ,laypage = layui.laypage //分页
            ,laydate = layui.laydate //日期
            ,table = layui.table //表格
            ,carousel = layui.carousel //轮播
            ,upload = layui.upload //上传
            ,element = layui.element //元素操作
            ,slider = layui.slider //滑块
            ,dropdown = layui.dropdown //下拉菜单
            ,form = layui.form

    //监听Tab切换
    element.on('tab(demo)', function(data){
      layer.tips('切换了 '+ data.index +'：'+ this.innerHTML, this, {
        tips: 1
      });
    });

    //拖拽上传
    upload.render({
      elem: '#test10'
      ,url: '/excelImportChina' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
      ,accept: 'file' //普通文件
      ,done: function(res){
        layer.msg(res.msg);
      }
    });

    //常规日期选择用法
    laydate.render({
      elem: '#registerDate',
      type: 'date'
    });

    //执行一个 table 实例
    tableIns = table.render({
      elem: '#demo'
      ,height: 550
      ,width: 1180
      ,url: '/listRegister' //数据接口
      ,title: '用户表'
      ,page: true //开启分页
      ,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
      ,totalRow: true //开启合计行
      ,cols: [ [ //表头
        {type: 'checkbox', fixed: 'left'}
        ,{field: 'id', title: '病人编号', width:120,fixed: 'left',sort: true}
        ,{field: 'name', title: '病人姓名', width:100}
        ,{field: 'doctorName', title: '主治医生', width:100}
        ,{field: 'idCard', title: '身份证号', width:150}
        ,{field: 'siNumber', title: '社保卡号', width:150}
        ,{field: 'registerMoney', title: '挂号费', width:150}
        ,{field: 'phone', title: '电话', width:80,}
        ,{field: 'isPay', title: '是否自费', width:100, templet:
            function (data){
              if(data.isPay === 0){
                return '<span>否</span>';
              }else if(data.isPay === 1){
                return '<span>是</span>';
              }
            }
        }
        ,{field: 'sex', title: '性别', width:80, templet:
            function (data){
              if(data.sex === 0){
                return '<span>男</span>';
              }else if(data.sex === 1){
                return '<span>女</span>';
              }
            }
        }
        ,{field: 'age', title: '年龄', width:80}
        ,{field: 'consultation', title: '初复诊', width: 80, templet:
            function (data) {
              if (data.consultation === 0) {
                return '<span>初诊</span>';
              } else {
                return '<span>复诊</span>';
              }
            }
        }
        ,{field: 'department', title: '科室', width: 80, templet:
            function (data){
              if(data.department === 1){
                return '<span>急诊</span>';
              }else if(data.department === 2){
                return '<span>儿科</span>'
              }else if(data.department === 3){
                return '<span>妇科</span>'
              }else if(data.department === 4){
                return '<span>皮肤科</span>'
              }else if(data.department === 5){
                return '<span>内分泌科</span>'
              }else if(data.department === 6){
                return '<span>牙科</span>'
              }
            }
        }
        ,{field: 'status', title: '病人当前状态', width: 150, templet:
            function (data){
              if(data.status === 1){
                return '<span>挂号</span>';
              }else if(data.status === 2){
                return '<span>已住院</span>';
              }else if(data.status === 3){
                return '<span>已出院</span>';
              }else if(data.status === 4){
                return '<span>已结算</span>';
              }
            }
        }
        ,{field: 'registerDate', title: '挂号日期', width: 200}
        ,{field: 'remark', title: '备注', width: 200}
        ,{fixed: 'right', width: 200, align:'center', toolbar: '#barDemo'}
      ] ]
    });

    //监听头工具栏事件 新增 修改和删除
    table.on('toolbar(test)', function(obj){
      var data = obj.data; //获取选中的数据
      switch(obj.event){
        case 'add':
          // 调出弹窗
          openAddLayer();
          break;
        case 'update':
          // 调出弹窗,加载一次数据  1.回显数据
          openAddLayer(data);
          break;
        case 'delete':
          if(data.length === 0){
            layer.msg('请选择一行');
          } else {
            layer.msg('删除');
          }
          break;
      };
    });

    //删除和编辑  监听行工具事件
    table.on('tool(test)', function(obj){
      var data = obj.data //获得当前行数据
              ,layEvent = obj.event;
      if(layEvent === 'update'){
        // 更新的逻辑代码
        openAddLayer(data);
      } else if(layEvent === 'delete'){
        layer.confirm('真的删除行么', function(index){
          obj.del(); //删除对应行（tr）的DOM结构
          //向服务端发送删除指令
          $.post("/deleteRegister",{id: obj.data.id},function (res) {
            if (res.code == 200){
              tableIns.reload({
                where:"",
              });
            }
            layer.msg(res.msg);
          })
          layer.close(index);
        });

      }
    });

    // 模糊查询
    form.on("submit(doSearch)",function (data) {
      tableIns.reload({
        where: data.field,
        page:{
          curr: 1
        }
      });
      return false;
    })

    // 新增或者数据请求
    form.on("submit(doAdd)",function (data) {
      $.post("/addRegister",data.field,function (res) {
        if (res.code == 200){
          tableIns.reload();
        }
        layer.msg(res.msg);
        layer.close(mainIndex);
      });

      return false;
    });


    // 模态窗//页面层
    function openAddLayer(data){
      mainIndex = layer.open({
        type: 1,
        skin: 'layui-layer-rim', //加上边框
        content: $("#addOrUpdateDiv"),
        area: ['700px', '700px'],
        success:function () {
          $("#searchFrm2")[0].reset();
          url = "/addRegister";
          //初始化下拉列表医生姓名
          $.get("/listAllDoctor", function (res){
            var doctor = res;
            var dom_doctor = $("#did");
            var html = "<option value=''>选择医生</option>";
            $.each(doctor,function (index,item){
              html+="<option value='"+item.id+"'>"+item.name+"</option>";
            });
            dom_doctor.html(html);
            form.render("select");
            form.val("searchFrm2",data);
          })
        }
      });
    }



    //分页
    laypage.render({
      elem: 'pageDemo' //分页容器的id
      ,count: 1000 //数据总数
      ,limit: 10 //每页显示的数据条数
      ,skin: '#1E9FFF' //自定义选中色值
      //,layout: ['prev', 'page', 'next', 'count', 'limit', 'refresh', 'skip'] //自定义排版
      ,jump: function(obj, first){
        if(!first){
          layer.msg('第'+ obj.curr +'页', {offset: 'b'});
        }
      }
    });


  });
</script>
</body>
</html>
